<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .topinfocard {
    margin: 10px;
    min-width: 200px;
    height: 100px;
    transition: all 0.3s;
    border-radius: 1px;
    font-size: 20px;
    color: white;
    vertical-align: middle;
    padding: 20px 0 0 20px;
  }

  .topinfocard-left {
    float: left;
  }

  .topinfocard-right {
    float: right;
  }

  .topinfocard-top {
    width: 100%;
    clear: both;
  }

  .topinfocard:hover {
    box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.8);
    transition: all 0.3s;
  }
</style>

<body>

  <div id="app">

    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="topinfocard" style="background-color:#00c0ef">
            <div>
              <div class="topinfocard-left">
                <div style="font-size: 30px; ">
                  {{userlist.length}}
                </div>
                <div style="font-size: 18px;">
                  现有员工
                </div>
              </div>
              <div class="topinfocard-right">
                <i class="el-icon-user" style="font-size: 100px;"> </i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="topinfocard" style="background-color:#00a65a">
            <div>
              <div class="topinfocard-left">
                <div style="font-size: 30px; ">
                  {{selltotal}}
                </div>
                <div style="font-size: 18px;">
                  售出猪数
                </div>
              </div>
              <div class="topinfocard-right">
                <i class="el-icon-sort" style="font-size: 100px;"> </i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="topinfocard" style="background-color:#f39c12">
            <div>
              <div class="topinfocard-left">
                <div style="font-size: 30px; ">
                  {{piglist.length}}
                </div>
                <div style="font-size: 18px;">
                  在养猪数
                </div>
              </div>
              <div class="topinfocard-right">
                <i class="el-icon-coin" style="font-size: 100px;"> </i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="topinfocard" style="background-color:#dd4b39">
            <div>
              <div class="topinfocard-left">
                <div style="font-size: 30px; ">
                  {{incometotal}}
                </div>
                <div style="font-size: 18px;">
                  营业额
                </div>
              </div>
              <div class="topinfocard-right">
                <i class="el-icon-money" style="font-size: 100px;"> </i>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName">
        <el-tab-pane label="销售列表" name="first">
          <el-table border :data="selllist" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="创建日期" show-overflow-tooltip>
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{  getDate(scope.row.date) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="销售单价(元)" width="120">
            </el-table-column>
            <el-table-column prop="marketprice" label="销售市场价(元)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="selldate" label="销售日期" show-overflow-tooltip>
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{  getDate(scope.row.selldate) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="sellcount" label="销售总量" show-overflow-tooltip>
            </el-table-column>

            <el-table-column prop="total" label="销售收入" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{  scope.row.price *   scope.row.sellcount}}</span>
              </template>
            </el-table-column>

          </el-table>

        </el-tab-pane>
      </el-tabs>
    </div>

  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      userlist: [],
      piglist: [],
      feedlist: [],
      selllist: [],
      selltotal: 0,
      usertotal: 0,
      incometotal: 0,
      feedtotal: 0,
      activeName: "first"
    },
    mounted() {
      this.getPig();
      this.getAllUser();
      this.getAllSell();
      this.getAllFeed();
    },
    methods: {
      getDate(date) {
        Date.prototype.Format = function (fmt) { // author: meizz
          var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
            "S": this.getMilliseconds() // 毫秒
          };
          if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
        }
        return new Date(date).Format("yyyy-MM-dd hh:mm:ss");
      },

      getPig() {
        this.piglist = []
        axios.post("/pig/getAllPig", {}).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              this.piglist.push(ele)
            })
          }
        })
      },
      getAllUser() {
        userlist = []
        axios.post("/user/getAllUser").then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              this.userlist.push(ele)
            })
          }
        })
      },
      getAllSell() {
        this.selllist = []
        var income = 0;
        var stotal = 0;
        axios.post("/sell/getAllSellInfo", {}).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              income += ele.sellcount * ele.price
              stotal += ele.sellcount
              this.selllist.push(ele)
            })
            this.selltotal = stotal
            this.incometotal = income;
          }
        })
      },
      getAllFeed() {
        feedlist = []
        axios.post("/feed/getAllFeed", {}).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              this.feedlist.push(ele)
            })
          }
        })
      }
    }
  })
</script>

</html>